<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="support" content="不支持IE9以下">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/css/layui.css"  media="all">
    <link rel="stylesheet" href="/css/index.css" media="all">
    <script src="/js/layui.js" charset="utf-8"></script>
    <title>后台管理-页面</title>
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin" id="body-content">
        <div class="layui-header">
            <div class="layui-logo">喵星人的管理后台</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item">
                    <a href="">控制台<span class="layui-badge">9</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="">个人中心<span class="layui-badge-dot"></span></a>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                        {{userName}}
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" v-on:click="menu('userInfo.html')">基本资料</a></dd>
                        <dd><a href="">安全设置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">退出</a></li>
            </ul>
        </div>
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">所有商品</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="javascript:;">列表三</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item">
                        <a href="javascript:;">解决方案</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">列表一</a></dd>
                            <dd><a href="javascript:;">列表二</a></dd>
                            <dd><a href="">超链接</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;" v-on:click="menu('classification.html')">商品分类</a></li>
                    <li class="layui-nav-item"><a href="javascript:;" v-on:click="menu('publish.html')">发布任务</a></li>
                </ul>
            </div>
        </div>
        <div class="layui-body back-dark">
            <!-- 内容主体区域 -->
            <iframe class="frame" :src="display" id="external-frame"></iframe>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © 在喵星人眼中我们都是行动缓慢的巨人
        </div>
    </div>
</body>
<script src="/js/axios.min.js"></script>
<script src="/js/vue.js"></script>
<script>
    layui.use('element', function(){
        var element = layui.element;
    });
    new Vue({
        el: '#body-content',
        data:{
            display:'default.html',
            userName: localStorage.getItem("userName")
        },
        methods :{
            menu: function (key) {
                this.display = key
            }
        },
        created: function () {

        }
    })
</script>
<script>
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };
    window.onload = function () {
        setIframeHeight(document.getElementById('external-frame'));
    };
</script>
</html>